<html>

<head>
    <title>测试swoole通信</title>
    <style>
        #show {
            border: 1px solid gold;
            height: 50%;
            overflow: auto;
        }

    </style>
</head>

<body>
<div id="show">

</div>

<!--<form action="" onsubmit="send()">-->
<input type="text" id='output' onblur="send()" onkeydown="clickSend()">
<!--</form>-->
<audio src="http://image.ldqsdy.com/FkJugFaOTENAxb1NICCuZUtd0bOa" controls='controls'></audio>
<audio src="https://m701.music.126.net/20200611165913/30eb54ec61864e04c814f4d030162449/jdyyaac/0509/5108/5158/2c67639a73fbb9f3a075f290e2564d91.m4a" controls='controls'></audio>

<script>
    var wsServer = 'ws://118.24.26.76:9502';
    var ws = new WebSocket(wsServer);
    ws.onopen = function (evt) {
        console.log("Connected to WebSocket server.");
    };

    ws.onclose = function (evt) {
        console.log("Disconnected");
    };

    ws.onmessage = function (evt) {
        switch (evt.data) {
            case 'ping':
                ws.send('pong');
                break;
            default:
                var show = document.getElementById('show')
                show.innerHTML = show.innerHTML + "<br>" + evt.data
                show.scrollTop = show.scrollHeight;
                break;

        }
        // console.log('Retrieved data from server: ' + evt.data);
    };

    ws.onerror = function (evt, e) {
        console.log('Error occured: ' + evt.data);
    };

    window.onload = function () {
        var input = document.getElementById('output')
        input.focus()
    }

    function send() {
        var input = document.getElementById('output')
        console.log(input.value)
        // ws.send(input.value)
    }

    function clickSend() {
        // 兼容FF和IE和Opera
        var theEvent = window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            var input = document.getElementById('output')
            ws.send(input.value)
            input.value = ''
        }
    }

</script>
</body>

</html>